import React, { Component } from 'react';
import moment from 'moment'

import { LocaleProvider } from 'antd';

import zh_CN from 'antd/lib/locale-provider/zh_CN';

import 'moment/locale/zh-cn';

import { DatePicker } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

class DataPickerCom extends Component {
    constructor(props) {
        super(props);
        this.field = this.props['field']
		this.state = this.setParamsData(this.props)
    }

    componentWillMount() {
	
    }

    componentDidMount() {

    }
	setParamsData(config) {
		let fetch = {}
		const { field, defaultValue } = config
		fetch[field] = defaultValue || moment()
		console.log(fetch)
		return fetch
	}
	onPickerChange(mode, date, dateString) {
	
		switch(mode.toString()) {
			case ["date", "date"].toString():
			this.state[this.field] = date;
			break;

			case ["month", "month"].toString():
			this.state[this.field] = date;
			break;
		}
		
		this.setState({...this.state})
		console.log(date, dateString)
	}
	onMonthPickerChange(mode, value) {
		console.log(333333,value, mode)
	}
	handlePanelChange( mode, value, valSting,e ) {
		console.log(1212,value, mode,valSting,e)
		console.log(value[0].format('YYYY-MM'))
	}
	onOk() {

	}
	getFetchData() {
		let data = this.state
		return data
	}

    render() {
		const { width, mode=['date', 'date']} = this.props
		let formatterPicker=()=> {
			switch(mode.toString()) {

				case ['year', 'year'].toString():
				return (
					<LocaleProvider locale={zh_CN}>
						<RangePicker 
						value={this.state[this.field]} 
						onChange={this.onMonthPickerChange.bind(this, mode)} 
						onPanelChange={this.handlePanelChange.bind(this, mode)}
						style={{ width }} 
						mode={mode} 
						{ ...this.props }
						/>
					</LocaleProvider>
				)
				case ['month', 'month'].toString():
				return (
					<LocaleProvider locale={zh_CN}>
						<RangePicker 
						value={this.state[this.field]} 
						onChange={this.onMonthPickerChange.bind(this, mode)} 
						onPanelChange={this.handlePanelChange.bind(this, mode)}
						style={{ width }} 
						mode={mode} 
						{ ...this.props }
						/>
					</LocaleProvider>
				)	
				default:
				return (
					<LocaleProvider locale={zh_CN}>
						<RangePicker 
						value={this.state[this.field]} 
						onChange={this.onPickerChange.bind(this, mode)} 
						style={{ width }} 
						{ ...this.props }
						/>
					</LocaleProvider>
				)
			}
		}
        return (
			formatterPicker()
		)
    }
	
}

export default DataPickerCom;
